<template>
  <div class="user-red-main">
    <van-popup v-model="show" @close="hanleClose" :close-on-click-overlay="false">
      <div class="wrapper" v-show="redStatus === 0">
        <div class="close" @close="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="header">
          <img :src="decoration"> <span>抢红包</span> <img class="rotate" :src="decoration">
        </div>
        <div class="red-notset">
          <div class="info">直播间未设置红包</div>
          <!-- <div class="retry">(含未设置、已参与、已抢完)</div> -->
          <div class="retry">请稍后重试~</div>
        </div>
      </div>
      <div v-if="redStatus === 1" class="wrapper">
        <div class="close" @close="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="seller-box" v-show="hasOpenRed < 3">
          <img :src="redData.headimgurl">
          <span><span>{{channelName}}</span>的红包</span>
        </div>
        <div class="red-name" v-show="hasOpenRed < 3">恭喜发财, 大吉大利</div>
        <div class="red-countdown rx-cc"  v-show="hasOpenRed < 3 && redData.timeRemaining != 0 && redData.timeRemaining != '' && this.timeRemaining">
          <span class="mr10">开抢倒计时:</span> <span class="w200"><van-count-down @finish="timeFinish" :time="parseInt(redData.timeRemaining)*1000" millisecond format="mm 分 ss 秒 SS" /></span>
        </div>
        <div class="paper-bg" :class="{'red-animation':hasOpenRed===3,'paper-timemargin':dTime,'paper-notimemargin':!dTime}">
          <img :src="paper" class="bgimg">
          <img class="avatar" :src="headimgurl" :class="{'avatar-animation':hasOpenRed===3}" v-show="hasOpenRed===3">
          <img v-show="hasOpenRed < 3" class="red-open" :src="hasOpenRed === 2 ? 'https://cdn.51ysscw.com/miniapp/open_spin.gif' : 'https://cdn.51ysscw.com/miniapp/open-btn.png' "  @click="handelOpenRed">
        </div>
        <div class="grabbed-box" v-show="hasOpenRed === 3" :class="{'avatar-animation':hasOpenRed===3}">
          <!-- <div class="seller-name">{{channelName}}</div>
          <div class="title">直播间红包</div> -->
          <div class="money">{{robMoney}}元</div>
          <div class="desc">已经存入余额，可直接提现</div>
          <div class="look-money" @click="opneBalance"><span>查看金额</span> <van-icon name="arrow" /></div>
        </div>
      </div>
      <div v-if="redStatus >= 3" class="wrapper">
        <div class="close" @close="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="paper-bg paper-timemargin paper-margin">
          <img :src="paper" class="bgimg">
          <img class="avatar" :src="redData.headimgurl">
        </div>
        <div v-show="redStatus == 3" class="completed-box">
          <div class="seller-name">主办方红包</div>
          <div class="completed-text">您已经抢过了</div>
          <div class="money">抢到了{{parseFloat(redData.money/100).toFixed(2)}}元</div>
          <div class="look-money" @click="opneBalance"><span>查看金额</span> <van-icon name="arrow" /></div>
        </div>
        <div v-show="redStatus == 4" class="lost-red">
          <div class="seller-name">{{channelName}}</div>
          <div class="redname">直播间红包</div>
          <div class="tips">手慢了，红包已抢完</div>
          <!-- <div class="look-money" ><span>查看金额</span> <van-icon name="arrow" /></div> -->
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import decoration from './assets/img_decoration.png'
import paper from './assets/img_paper_bg.png'
import http from "@/utils/request"

const headDefault = require('./assets/defaultUserHead.png')
export default {
  props: {
    redData: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    redStatus: {
      type: Number,
    },
    dTime: {
      type: Boolean,
      default: false
    },
    channelName: {
      type: Number | String,
    },
  },
  data() {
    return {
      timeRemaining:true,
      show: true,
      paper,
      decoration,
      hasOpenRed: 1,//redStatus为1可抢时——hasOpenRed:1抢前 2抢中 3抢后
      headDefault,//默认头像
      robMoney:0,
      headimgurl:headDefault,//抢的头像
    }
  },
  created(){
    console.log(this.redStatus)
  },
  methods: {
    timeFinish(){
      this.timeRemaining = false
    },
    hanleClose() {
      this.$emit('onClose')
    },
    handelOpenRed() {
      console.log(this.redData)
      if(redData.timeRemaining != 0 && redData.timeRemaining && this.timeRemaining){
        
        return false
      }
        if (this.hasOpenRed === 1) {
          this.hasOpenRed = 2
          http.request({
              url: "/api/mobile/public/redPacket/get",
              method: "post",
              data: {
                id: this.redData.id,
              }
          }).then((res)=>{
            if(res.status == 10000){//抢到了
              this.robMoney = parseFloat(res.data.redPacketRecordList[0].money/100).toFixed(2)
              this.headimgurl = res.data.redPacketRecordList[0].headimgurl
              setTimeout(() => {
                this.hasOpenRed = 3
              }, 1000)
            }
            if(res.status == 10012){//未抢到，已被抢完
              this.redStatus = 4
            }
          })
        }
    },
    opneBalance(){
      this.$router.push({path:"/balance"})
    }
  }
}
</script>
<style>
.van-popup{
  background: transparent;
}
</style>
<style lang="scss" scoped>
.user-red-main{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 5;
   .wrapper{
     width: 600px;
     height: 950px;
     background: #FA4141;
     border-radius: 16px;
     position: relative;
    //  padding: 0 40px;
     .close {
       color: #fff;
       font-size: 32px;
       position: absolute;
       right: 24px;
       top: 24px;
     }
      .header{
       text-align: center;
       padding: 40px 0;
       img{
         width: 56px;
         height: 20px;
         vertical-align: middle;
       }
       span{
        font-size: 40px;
        color: #FEE4B2;
        padding: 0 24px;
        vertical-align: middle;
       }
       .rotate{
         transform:  rotate(180deg);
       }
     }
     .seller-box{
       padding-top: 175px;
       text-align: center;
       margin-bottom: 45px;
       img { width:46px;height: 46px;vertical-align: middle;margin-right:8px;border-radius: 8px;}
       span {
         vertical-align: middle;
         color: #FFE492;
         font-size: 36px;
       }
     }
     .red-name {
       color: #FFE492;
       font-size: 40px;
       text-align: center;
     }
     .paper-timemargin{
        margin: 101px 0 20px 0;
     }
     .paper-notimemargin{
        margin: 202px 0 20px 0;
     }
    .paper-bg{
       width: 100%;
       text-align: center;
       display: inline-block;
       .bgimg {
         height: 100%;
         height: 138px;
       }
       .avatar {
         width: 124px;
         height: 124px;
         border-radius: 50%;
         margin-top: -80px;
       }
       .red-open{
         width: 188px;
         height: 188px;
         border-radius: 50%;
         margin-top: -80px;
       }
     }
     .paper-margin {
       margin-top: 20%;
     }
     .red-countdown{
       width: 394px;
       height: 64px;
       text-align: center;
       color: #FEE4B2;
       font-size: 28px;
       background: #D92727;
       line-height: 64px;
       border-radius: 32px;
       margin:62px auto 0 auto;
       span {
         vertical-align: middle;
         .van-count-down {
           color: #FEE4B2 !important;
         }
       }
      }
      .grabbed-box{
        text-align: center;
        color: #FEE4B2;
        margin-top:50px;
        .seller-name{
          font-size: 30px;
          margin-bottom: 24px;
          overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
        }
        .title{
          font-size: 40px;
          font-weight: bold;
          margin-bottom: 52px;
        }
        .money{
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 24px;
        }
        .desc{
          font-size: 30px;
          margin-bottom: 190px;
        }
        .look-money{
          font-size: 30px;
          span{vertical-align:middle;margin-right: 8px;}
          i{vertical-align: middle;}
        }
      }
      .red-notset {
        text-align: center;
        color: #FEE4B2;
        margin-top: 329px;
        .info{
          font-size: 40px;
          font-weight: bold;
          margin-bottom: 24px;
        }
        .retry{
          font-size: 30px;
          margin-bottom: 20px;
        }
      }
      .completed-box{
        text-align: center;
        color: #FEE4B2;
        .seller-name{
          font-size: 30px;
          overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
        }
        .completed-text{
          font-size: 48px;
          margin:100px 0 24px 0;
        }
        .money{
          font-size: 30px;
          margin-bottom: 304px;
        }
        .look-money{
          span{vertical-align:middle;margin-right:8px;}
          i{vertical-align: middle;}
        }
      }
      .lost-red {
        text-align: center;
        color: #FEE4B2;
        margin-top: 93px;
        .seller-name{
          font-size: 30px;
          margin-bottom: 24px;
          overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
        }
        .redname{
          font-size: 40px;
          margin-bottom: 52px;
          font-weight: bold;
        }
        .tips{
          font-size: 48px;
          margin-bottom: 267px;
          font-weight: bold;
        }
        .look-money{
          span{vertical-align:middle;margin-right:8px;}
          i{vertical-align: middle;}
        }
      }
     .red-animation {
       animation: linear 0.5s redup both;
     }
     @keyframes redup {
       from { margin-top:85%; }
       to { margin-top:25%; }
     }
     .avatar-animation {
        animation: 0.5s linear 0.5s avatar both;
     }
      @keyframes avatar {
       from { opacity: 0; }
       to { opacity: 1; }
     }
    @keyframes shake {
      0%, 100% {-webkit-transform: translateX(0);}
       10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px)}
       20%, 40%, 60%, 80% {-webkit-transform: translateX(10px)}
   }
  .shake {
  animation-name: shake;
  animation-duration: 1s;
	}
  }
}
</style>
